<script>
// 导出所有内容，给其添加一个别名
/*
    {
        a,
        b,
        c,
        d
    }
    import { a,b,c } from 'a'
    import * as S from 'a'
    S.a
    S.b
*/
import * as XLSX from 'xlsx'
export default {
    data() {
        return {
            proList: [],
            current: 1
        }
    },
    methods: {
        importClick() {
            // 找到 DOM 元素，在 vue 中可以使用 ref 来获取
            this.$refs.input.click()
        },
        changeFn(event) {
            // console.log(event.target.files[0]);
            if (event.target.files[0]) {
                // 1. 获取到选中的文件
                const file = event.target.files[0]

                // 2. 创建一个文件的加载器
                const reader = new FileReader()

                // 3. 将文件加载为数据流
                reader.readAsArrayBuffer(file)


                reader.onload = () => {
                    // console.log(reader.result);
                    // 4. 将数据流转换成 js 对象
                    const box = XLSX.read(reader.result, { type: 'buffer' })
                    // console.log(box);

                    // 5. 将 工作表1 中的内容取出
                    let res = box.Sheets['工作表1']

                    // 6. 将 工作表1 转换成 json 数据
                    res = XLSX.utils.sheet_to_json(res)

                    // console.log(res);
                    // 7. 将数据渲染到页面中
                    this.proList = res
                }

            }
        }
    },
    computed: {
        tableData() {
            return this.proList.slice((this.current - 1) * 5, (this.current - 1) * 5 + 5)
        }
    }
}
</script>
<template>
    <div>
        <h3>
            表格导入
            <!-- <button @click="importClick">点击选择文件</button> -->
            <el-button @click="importClick">点击选择文件</el-button>

            <input ref="input" hidden @change="changeFn" type="file">
        </h3>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
                <template #default="{ $index }">
                    <div> {{ (current - 1) * 5 + 1 + $index }} </div>
                </template>
            </el-table-column>
            <el-table-column label="商品图片" width="180">
                <template #default="{ row }">
                    <div>
                        <el-image style="width: 75px" :src="row.img1"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="proname" label="商品名称" width="320" />
            <el-table-column prop="category" label="商品分类" />
            <el-table-column prop="originprice" label="商品价格" />
        </el-table>

        <el-pagination v-model:current-page="current" :page-size="5" background layout="prev, pager, next"
            :total="proList.length" />

    </div>
</template>
